<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div style="height: 86vh;width: 100%" v-show="!relularedOrgShow">
      <div class="search">
        <el-form :inline="true" :model="searchInline" class="demo-form-inline" style="padding-top: 12px;height:5%;">
          <el-form-item>
            <el-input v-model="searchInline.provices" placeholder="省份"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchInline.cities" placeholder="城市"></el-input>
          </el-form-item>
          <el-form-item style="float:right;padding-right: 10px">
            <el-button type="text" @click="queryServerUnit()"><span style="color:rgb(104,104,104)">筛选</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
          <el-table :data="regularData" :header-cell-style="{backgroundColor:'#5B9BD5',color:'black',fontWeight:'blod'}" :cell-style="{}">
            <el-table-column prop="id" label="序号">
            </el-table-column>
            <el-table-column prop="regularDep" label="监管部门">
              <template slot-scope="scope">
                <el-button type="text" style="text-decoration: underline; color: #606266"
                           @click="gotoDetail(scope.row)">
                  {{ scope.row.regularDep }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="reguLevel" label="级别">
            </el-table-column>
            <el-table-column prop="addr" label="地址">
            </el-table-column>
            <el-table-column prop="tel" label="联系电话">
            </el-table-column>
            <el-table-column prop="email" label="联系邮箱">
            </el-table-column>
          </el-table>
      </div>
      <div class="page">
          <el-pagination style="float: right;"
            background  @size-change="pageSizeChage"  @current-change="currentPageChage"  :current-page="page.currentPage"
            layout="total, sizes, prev, pager, next, jumper"
                         :page-sizes="[10, 15, 20, 40]" :page-size="14" :total="page.pageTotal" >
          </el-pagination>
      </div>
    </div>
    <RelularedOrg v-show="relularedOrgShow" :regulartor="regulartor"></RelularedOrg>

  </el-card>
</template>

<script>
import Breadcrumb from "../BreadCrumb/BreadCrumb.vue";
import RelularedOrg from "./regulator/RelularedOrg";
export default {

  data() {
    return {
      //导航栏
      naviItems: [{text: '储罐'}, {text: '云服监管', to: '/chuguan/dataCloudService/regulator'}],
    //搜索栏
      searchInline: {
        provices: "",
        cities: "",
      },
      //传送过去的对象
      regulartor:{},
      //表格数据模拟
      regularData:[
       {
          id:'1', regularDep:"特种设备技术监督局", reguLevel:"国家级",addr:"铜陵市**路", tel:'',email:"",
        },
        {
          id:'2',regularDep:"山东特种设备技术监督局", reguLevel:"省级",addr:"", tel:'',email:""
        },
        {
          id:'3',regularDep:"安徽特种设备技术监督局", reguLevel:"省级",addr:"", tel:'',email:""
        },
        {
          id:'4',regularDep:"铜陵市特种设备技术监督局", reguLevel:"地市级",addr:"铜陵市**路", tel:'',email:""
        },
        {
          id:'5',regularDep:"青岛市特种设备技术监督局", reguLevel:"地市级",addr:"", tel:'',email:""
        },
      ],
      //分页
      page:{
        currentPage:1,
        pageTotal:10,
        pageSize:15,
        fontSize: '20px',
      },
      relularedOrgShow:false   //控制被监管部门的显示
    }
  },
  created() {
     this.page.pageTotal=this.regularData.length
  },
  components: { 
    Breadcrumb,
    RelularedOrg
  },
  methods: {
    //表格查询事件
    queryServerUnit: function () { },
    //监管部门点击事件
    gotoDetail:function (regulator) {
      console.log("监管部门ID"+regulator.id)
      this.regulartor=regulator
      this.relularedOrgShow=true
    },
    //分页之-页面大小改变执行
    pageSizeChage:function (pageSize){

    },
    //分页之-当前页面改变执行
    currentPageChage:function (page){

    }
  },
}
</script>

<style lang="less" scoped>
.search{
  width: 100%;
  height: 5%;
}
.table {
  width: 100%;
  height: 86%;
}
.page{
  width: 100%;
  height: 8%;
}

</style>
